<template>
    <div>
        <div id="cz">
            <div class="CommonStyles">充值管理</div>
            <div class="CommonStyles"
                style="height:30px;background:#169bd5;text-align: center;line-height: 30px;color:#ffffff;padding:5px 8px;"
                @click="fn">充值价格配置</div>
        </div>
        <div id="top">
            <!-- 左边 -->
            <div id="TopLeft">
                <div class="block" id="TopLeftOne">
                    <span class="demonstration">充值时间:</span>
                    <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div class="demo-input-suffix" id="TopLeftTwo">
                    <span style="width:97px;"> 充值手机号：</span>
                    <el-input v-model="input1">
                    </el-input>
                </div>
                <div class="demo-input-suffix" id="TopLeftThree">
                    <span style="width:60px;">订单号：</span>
                    <el-input v-model="input2">
                    </el-input>
                </div>
            </div>
            <!-- 右边 -->
            <div id="Topright">
                <el-row>
                    <el-button type="info" @click="getDataOne">查询</el-button>
                </el-row>
            </div>
        </div>
        <!-- 表格 -->
        <div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="createTime" label="充值时间" width="180">
                </el-table-column>
                <el-table-column prop="name" label="充值类型" width="180">
                </el-table-column>
                <el-table-column prop="price" label="实际支付">
                </el-table-column>
                <el-table-column prop="tel" label="充值手机号">
                </el-table-column>
                <el-table-column prop="orderNum" label="订单号">
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage3" :page-size="limit" layout="prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            value1: '',
            input1: '',
            input2: '',
            currentPage3: 1,
            limit: 5,
            page: 1,
            total: 0,
            tableData: [{

            },]
        };
    },
    methods: {
        fn: function () {
            this.$router.push("/home/czgl/jgpz");
        },
        handleSizeChange: function (val) {
            console.log(`每页 ${val} 条`);
            this.id = val;
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val;
            this.getData();
        },
        getData: function () {
            this.$axios({
                url: '/recharge/list',
                methods: 'get',
                params: {
                    page: this.page,
                    limit: 5
                }
            }).then((res) => {
                if (res.data.code == 0) {
                    this.tableData = res.data.data.list;
                    this.total = res.data.totalCount
                } else {
                }
            })
        },
        getDataOne: function () {
            this.$axios({
                url: '/recharge/list',
                methods: 'get',
                params: {
                    page: this.page,
                    limit: 5,
                    tel:this.input1,
                    orderNum:this.input2

                }
            }).then((res) => {
                if (res.data.code == 0) {
                    this.tableData = res.data.data.list;
                    this.total = res.data.totalCount
                } else {
                }
            })
        },
    },
    mounted: function () {
        this.getData()

    }
};
</script>
  
<style lang="less" scoped>
#cz {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.CommonStyles {
    text-align: left;
    line-height: 0px;
    padding: 0px;
}

ul li {
    list-style: none;
    width: 150px;
    height: 40px;
}

#top {
    display: flex;
    width: 100%;
    height: 60px;
    margin-top: 40px;
    font-size: 8px;
    font-weight: 400;
    display: flex;
    background: #d7d7d7;
}

#TopLeft {
    display: flex;
    align-items: center;
}

#TopLeftOne,
#TopLeftTwo,
#TopLeftThree,
#Topright {
    display: flex;
    align-items: center;
    line-height: 0px;
    padding: 0px;
    margin-left: 8px;

}

#Topright {
    margin-left: 65px;
}
</style>


  